/* mall/my-ecommerce-app/admin/src/index.css */
/* */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif; /* 与 Ant Design 主题中的 font-family 保持一致或自定义 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f7f8fc; /* 一个非常浅的、偏冷的灰色背景，增加清爽感 */
  color: rgba(0, 0, 0, 0.88); /* 对应 antd v5 的 text-color */
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* 全局内容区域增加呼吸感 */
.admin-content-area { /* 这个类名需要你手动添加到 AdminLayout.jsx 的 Layout.Content 组件上 */
  padding: 24px; /* 增加内容区的内边距 */
  margin: 24px; /* 如果需要在内容区外部也增加边距 */
  background-color: #ffffff; /* 内容区背景设为白色，与body背景区分 */
  border-radius: 8px; /* 配合主题圆角 */
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 
              0 9px 28px 0 rgba(0, 0, 0, 0.05), 
              0 12px 48px 16px rgba(0, 0, 0, 0.03); /* 使用 Ant Design 的标准阴影 */
}

/* 登录页面的容器样式 */
.login-container { /* */
  display: flex;
  flex-direction: column; /* 让标题和卡片垂直排列 */
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5; /* 与 Ant Design 登录页常见背景色一致 */
  padding: 20px;
}

/* 登录页的标题区域 */
.login-header {
  text-align: center;
  margin-bottom: 40px; /* 标题和登录卡片间的距离 */
}

.login-header img { /* 如果你有Logo */
  height: 60px; /* 根据你的Logo调整 */
  margin-bottom: 16px;
}

.login-header .ant-typography { /* 针对 antd 的 Typography 组件 */
  margin-bottom: 8px;
  font-weight: 600; /* 标题加粗 */
}

/* 登录表单卡片的样式 */
.login-form-card { /* 将 Login.jsx 中的 Card className 改为这个 */
  width: 400px;
  max-width: 100%;
  padding: 24px; /* 增加卡片内边距 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* 更柔和且有层次感的阴影 */
  border-radius: 12px; /* 更大的圆角 */
  border: none; /* 移除默认边框，靠阴影和背景区分 */
}

.login-form-card .ant-form-item {
  margin-bottom: 20px; /* 增加表单项间距 */
}

.login-form-card .ant-form-item-label > label {
  font-weight: 500; /* 表单标签稍加粗 */
}

.login-form-button { /* */
  width: 100%;
  height: 44px; /* 按钮高度 */
  font-size: 16px; /* 按钮文字大小 */
}

/* 针对 Ant Design 布局组件的微调，使其更“大气” */
.ant-layout-header {
  /* padding: 0 24px; */ /* 主题变量已包含，如果需要可以覆盖 */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */ /* 给头部一个轻微的底部阴影，如果背景是白色的话 */
}

/* 移除表格单元格的默认下边框，如果想要更简洁的表格 */
/*
.ant-table-tbody > tr > td {
  border-bottom: none;
}
.ant-table-thead > tr > th {
  background-color: transparent !important; // 表头背景透明化
  border-bottom: 1px solid #e8e8e8; // 保留一个浅色下边框
}
*/

/* 全局禁用不必要的边框，增加呼吸感 */
.ant-card-bordered {
    /* border: 1px solid #f0f0f0; */ /* 如果想让卡片边框更柔和 */
}

/* 页面标题样式 */
.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  color: rgba(0, 0, 0, 0.88);
}

/* 使 Ant Design 的 Sider 宽度更舒展一些 */
/* .ant-layout-sider {
  flex: 0 0 240px !important; // 默认是 200px
  max-width: 240px !important;
  min-width: 240px !important;
  width: 240px !important;
} */

/* 给菜单项增加一些垂直padding，显得不拥挤 */
.ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title {
  /* margin-top: 4px;
  margin-bottom: 4px; */
  /* height: 44px; */ /* 调整菜单项高度 */
  /* line-height: 44px; */
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f4f7f9; /* 更改为 dashboard.html 的背景色 */
  color: #333; /* dashboard.html 基础文字颜色 */
}

/* 确保 admin-content-area 的 padding 不影响 dashboard 内部的 padding */
.admin-content-area { 
  padding: 0 !important; /* Dashboard 内部自己控制 padding */
  background-color: #f4f7f9 !important; /* 与 body 背景色统一，避免双重背景 */
  box-shadow: none !important; /* Dashboard 内部卡片自带阴影 */
  border-radius: 0 !important;
}


/* 如果希望表格行有细微的边框分隔，而不是纯色背景变化 */
.ant-table-tbody > tr > td {
  border-bottom: 1px solid #f0f0f0; /* dashboard.html 中的表格分隔线 */
}
.ant-table-thead > tr > th {
  background-color: #f8f9fa !important; /* dashboard.html 表头背景 */
  font-weight: 600;
  color: #495057; /* dashboard.html 表头文字颜色 */
  border-bottom: 1px solid #dee2e6; /* 更明显的表头下边框 */
}

.ant-table-tbody > tr:hover > td {
  background-color: #f1f3f5 !important; /* dashboard.html hover 效果 */
}

/* 卡片悬停效果（如果AntD默认的hoverable不够） */
.ant-card-hoverable:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important; /* 强化阴影 */
}